<div id="side-menu">
	<button aria-label="button" mat-icon-button (click)="opened = !opened">
		<mat-icon>apps</mat-icon>
	</button>
	<div class="box" [class.opened]="opened">
		<div class="tip">
			<div class="border"></div>
			<div class="foreground"></div>
		</div>
	<div class="services">
		<div class="row">
				<a href="{{ configUrl.fossasia.blog }}">
				<div class="col">
					<div class="img">
						<img src="{{ imageUrl.blog.root }}" alt="Fossasia">
					</div>
					<span>Blogs</span>
				</div>
			</a>
			<a href="{{ configUrl.github.loklakSearch }}">
				<div class="col">
					<div class="img">
						<img src="{{ imageUrl.github.root }}" alt="Fossasia">
					</div>
					<span>Github</span>
				</div>
			</a>
			<a href="{{ configUrl.github.loklakSearch }}/issues">
				<div class="col">
					<div class="img">
						<img src="{{ imageUrl.bug.root}}" alt="Fossasia">
					</div>
					<span>Bug Report</span>
				</div>
			</a>
		</div>
	</div>
	<hr />
		<div class="services">
			<div class="row">
				<a href="{{ configUrl.fossasia.root }}">
					<div class="col">
						<div class="img">
							<img src="{{ imageUrl.fossasia.root }}" width="55" height="22" alt="Fossasia">
						</div>
						<span>FOSSASIA</span>
					</div>
				</a>
				<a href="{{ configUrl.phimpme.root }}">
					<div class="col">
						<div class="img">
							<img src="{{ imageUrl.phimpme.root }}" width="50" height="50" alt="Phimpme">
						</div>
						<span>Phimpme</span>
					</div>
				</a>
				<a href="{{ configUrl.susper.root }}">
					<div class="col">
						<div class="img">
							<img src="{{ imageUrl.susper.root }}" width="60" height="16" alt="Susper">
						</div>
						<span>Susper</span>
					</div>
				</a>
			</div>
			<div class="row">
				<a href="{{ configUrl.susiChat.root }}">
					<div class="col">
						<div class="img">
							<img src="{{ imageUrl.susichat.root }}" width="60" height="12" alt="Susi.AI">
						</div>
						<span>Susi.AI</span>
					</div>
				</a>
				<a href="{{ configUrl.pslab.root }}">
					<div class="col">
						<div class="img">
							<img src="{{ imageUrl.pslab.root }}" width="50" height="50" alt="PSLab">
						</div>
						<span>PSLab</span>
					</div>
				</a>
				<a href="{{ configUrl.eventyay.root }}">
					<div class="col">
						<div class="img">
							<img src="{{ imageUrl.eventyay.root }}" width="60" height="18" alt="Eventyay">
						</div>
						<span>Eventyay</span>
					</div>
				</a>
			</div>
			<div class="row">
				<a href="{{ configUrl.badgeyay.root }}">
					<div class="col">
						<div class="img">
							<img src="{{ imageUrl.badgeyay.root }}" width="60" height="60" alt="badgeyay">

						</div>
						<span>Badgeyay</span>
					</div>
				</a>
				<a href="{{ configUrl.meilix.root }}">
					<div class="col">
						<div class="img">
							<img src="{{ imageUrl.meilix.root }}" width="60" height="60" alt="Meilix">
						</div>
						<span>Meilix</span>
					</div>
				</a>
				<a href="{{ configUrl.yaydoc.root }}">
					<div class="col">
						<div class="img">
							<img src="{{ imageUrl.yaydoc.root }}" width="60" height="60" alt="Yaydoc">
						</div>
						<span>Yaydoc</span>
					</div>
				</a>
			</div>
		</div>
	</div>
</div>
